<template>
	<view class="add-path">
		<view class="path-item">
			<view class="">姓名：</view>
			<input type="text" style="text-align: center;" value="" v-model="pathObj.name" placeholder="收件人姓名" />
		</view>
		<view class="path-item">
			<view class="">电话：</view>
			<input type="text" style="text-align: center;" value="" v-model="pathObj.tel" placeholder="电话" />
		</view>
		<view class="path-item">
			<view class="">地区：</view>
			<view  style="text-align: center;" @tap='showCityPicker'>{{pathList}}</view>
			<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm">
			</mpvue-city-picker>
		</view>
		<view class="path-item">
			<view class="">详细地址：</view>
			<input type="text" style="text-align: center;" value="" placeholder="5到60个字符" v-model="pathObj.address"/>
		</view>
		<view class='setAddress'>
			<view class="defaultDaaress">设为默认地址:</view>
			<radio-group name="" @change="radioChange" class="radio-path">
				<label>
					<radio color="#FF3333" style="text-align: right;"/><text></text>
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script>
	import $http from '../../common/api/request.js'
	import mpvueCityPicker from '../../components/uni/mpvue-citypicker/mpvueCityPicker.vue'
	import {mapActions} from 'vuex'
	export default {
		data() {
			return {
				pickerValueDefault: [0, 0, 1],
				pathObj:{
					name:"",
					tel:"",
					province:"",//省
					city:"",//市
					district:"",//区
					address:"",//详细地址
					isDefault:false,
				},
				i:-1,
				//是否修改的状态
				isStatus:false
				
			}
		},
		computed:{
			pathList(){
				if(this.pathObj.province){
					return `${this.pathObj.province}${this.pathObj.city}${this.pathObj.district}`
				}else{
					return "请选择"
				}
			}
		},
		components:{
			mpvueCityPicker
		},
		onNavigationBarButtonTap(){
			if(this.isStatus){
				// 修改
				$http.request({
					url:'/updateAddress',
					method:'POST',
					header:{
						token:true
					},
					data:{
						...this.pathObj
					}
				}).then((res)=>{
					// 先判断 isDefault 的值是否为true  再赋值1 0
					this.pathObj.isDefault = this.pathObj.isDefault ==true?1:0;
					this.updatePathFn({
						index:this.i,
						item:this.pathObj
					})
					uni.showToast({
						title:'修改成功',
						icon:"none"
					})
					uni.navigateBack({
						delta:1
					})
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:'none'
					})
				})
				
			}else {
				// 新增
				$http.request({
					url:'/addAddress',
					method:'POST',
					header:{
						token:true
					},
					data:{
						...this.pathObj
					}
				}).then((res)=>{
					this.createPathFn(this.pathObj)
					uni.navigateBack({
						delta:1
					})
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:'none'
					})
				})
				
			}
		},
		onLoad(e) {
			if(e.data){
				uni.setNavigationBarTitle({
					title:"修改地址"
				})
				let result = JSON.parse(e.data);
				this.pathObj = result.item;
				this.i = result.index;
				this.isStatus = true;
			}
		},
		methods: {
			...mapActions(["createPathFn",'updatePathFn']),
			radioChange(){
				// 点击默认地址按钮  如果pathObj.isDefault == 1 将true复制赋值给pathObj.isDefault 否则为 false
				this.pathObj.isDefault = this.pathObj.isDefault === 1 ? true : false
				this.pathObj.isDefault = !this.pathObj.isDefault?1:0;
			},
			onConfirm(e){
				let arr = e.label.split("-");
				this.pathObj.province = arr[0];
				this.pathObj.city = arr[1];
				this.pathObj.district = arr[2]
			},
			showCityPicker(){
				this.$refs.mpvueCityPicker.show();
			}
		}
	}
</script>

<style scoped>
.path-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:16rpx 0;
	width: 100%;
	border-bottom: 2rpx solid #CCCCCC;
}
.path-item input{
	flex:1;
	text-align: left;
	padding-left:10rpx;
}
.setAddress{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:16rpx 0;
	border-bottom: 2rpx solid #CCCCCC;
}
.defaultDaaress{
	width: 360rpx;
}
.radio-path{
	margin-left: -80rpx;
}
</style>
